<script setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useCookieStore, useAudioStore } from "@/stores";
import { getBanner } from "@/apis/home";
import { getNewMusicApi, getRecommendMusicApi } from "@/apis/song";
import { getPersonalized } from "@/apis/musicList";
import HomeBanner from "./components/HomeBanner.vue";
import HomeItem from "./components/HomeItem.vue";
import HomeMusicList from "./components/HomeMusicList.vue";
import LgtActiveMusicList from "@/components/LgtActiveMusicList/LgtActiveMusicList.vue";
import LgtMusicCard from "@/components/LgtMusicCard/LgtMusicCard.vue";
import LgtControl from "@/components/LgtControl/LgtControl.vue";
const { safeAreaInsets } = uni.getSystemInfoSync();

const cookieStore = useCookieStore();
const audioStore = useAudioStore();

const bannerData = ref([]);
const getBannerData = async () => {
  const data = await getBanner({ type: 1 });
  bannerData.value = data.banners;
};

const personalizedData = ref([]);
const getPersonalizedData = async () => {
  const data = await getPersonalized({ limit: 6 });
  personalizedData.value = data.result;
};

const newMusic = ref([]);
const getNewMusic = async () => {
  const data = await getNewMusicApi({ limit: 30 });
  if (data.code !== 200)
    return uni.showToast({ title: "获取推荐新音乐失败", icon: "none" });
  newMusic.value = data.result.map((item) => {
    return {
      id: item.song.id,
      name: item.song.name,
      ar: item.song.artists,
      al: item.song.album,
      privilege: item.song.privilege,
    };
  });
};

const recommendMusic = ref([]);
const getRecommendMusic = async () => {
  const data = getRecommendMusicApi();
  recommendMusic.value = data;
  console.log(data);
};

const playMisic = (e) => {
  audioStore.getMusicUrlData(e.id);
  audioStore.playIndex = e.index;
  audioStore.activeMusicList = newMusic.value;
};

const popup = ref(null);
const popupStatus = ref(false);
const openPlayList = () => {
  popup.value.open();
};

const popupChange = (e) => {
  popupStatus.value = e.show;
};

const onSearch = () => {
  uni.navigateTo({ url: '/pages/search/search' })
}

watch(
  () => cookieStore.cookie.cookie,
  async () => {
    if (cookieStore.cookie.cookie) {
      await getRecommendMusic();
    } else {
      await getNewMusic();
    }
  }
);

onLoad(async () => {
  await getBannerData();
  await getPersonalizedData();
  await getNewMusic();
});
</script>

<template>
  <scroll-view class="scroll-view-y" enable-back-to-top scroll-y>
    <view :style="{ paddingTop: safeAreaInsets.top + 'px', height: '80rpx' }">
      <view class="home-input" @tap="onSearch">
        <view class="seachBtn">搜索</view>
      </view>
    </view>
    <HomeBanner :banners="bannerData" />
    <HomeItem />

    <view class="new-music">
      <view class="title">推荐歌单</view>
      <scroll-view scroll-x show-scrollbar="false" class="scroll-view-x">
        <HomeMusicList :list="personalizedData" />
      </scroll-view>
      <template v-if="cookieStore.cookie.cookie">
        <!-- 这里会有问题，登录以后查看 -->
        <view class="title">每日推荐</view>
        <LgtMusicCard
          v-for="(item, index) in recommendMusic"
          :key="item.id"
          :music="item"
          :index="index"
          :privilege="item.privilege"
          @play="playMisic($event)"
        />
      </template>
      <template v-else>
        <view class="title">推荐音乐</view>
        <template v-if="newMusic.length">
          <LgtMusicCard
            v-for="(item, index) in newMusic"
            :key="item.id"
            :music="item"
            :index="index"
            :privilege="item.privilege"
            @play="playMisic($event)"
          />
        </template>
        <template v-else>
          <LgtMusicCard v-for="(item, index) in 10" :key="index" />
        </template>
      </template>
    </view>
  </scroll-view>
  <uni-popup ref="popup" type="bottom" @change="popupChange($event)">
    <LgtActiveMusicList :status="popupStatus" />
  </uni-popup>
  <lgt-control class="control" @openPlayList="openPlayList"></lgt-control>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.scroll-view-y {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100rpx;
  background-repeat: no-repeat;
  background-image: url("@/static/center_bg.png");
  background-size: 100% auto;

  .home-input {
    position: fixed;
    z-index: 10;
    margin: 12rpx 0 12rpx 30rpx;
    height: 66rpx;
    background-color: rgba(255, 255, 255, 0.3);
    width: 480rpx;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .seachBtn {
      text-align: center;
      line-height: 56rpx;
      margin-right: 5rpx;
      width: 130rpx;
      border-radius: 30rpx;
      background-color: $primaryColor;
      color: #fff;
      font-size: 26rpx;
    }
  }

  .title {
    margin-left: 30rpx;
    line-height: 80rpx;
    font-weight: bold;
  }
  .scroll-view-x {
    height: 320rpx;
    padding-right: 30rpx;
    margin-bottom: 20rpx;
    ::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
      color: transparent;
    }
  }
  .new-music {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding-top: 20rpx;
  }
}
.control {
  position: absolute;
  bottom: 0rpx;
}
</style>
